<template>
  <div class="header">
    <div class="logo">
      <div class="left" @click="handlehome">
        <i class="fa-solid fa-sun"></i>
        <p>新中地天气</p>
      </div>
      <div class="middle">
        <h4 class="text-lg">{{ weatherbase.lives?.[0]?.city || '加载中' }}</h4>
        <span class="text-sm"
          >实时天气:{{ weatherbase.lives?.[0]?.weather || '加载中' }}
          {{ weatherbase.lives?.[0]?.temperature || '--' }}℃
        </span>
        <span class="text-sm">
          {{ weatherbase.lives?.[0]?.winddirection || '--' }}风
          {{ weatherbase.lives?.[0]?.windpower || '--' }}级
        </span>
      </div>
    </div>
    <div class="right">
      <i class="fa-solid fa-circle-info" @click="isShow = !isShow"></i>

      <div class="info" v-if="isShow">
        <div class="infotext">
          <h3>关于:</h3>
          <p>这个应用可以用来追踪你选择城市的当前天气</p>
          <h3>如何使用:</h3>
          <ul>
            <li>1.点击搜索框输入你希望追踪的城市</li>
            <li>2.在搜索结果中选中一个城市，你将获取当地最新的天气</li>
            <li>3.点击右侧的 + 号可以将追踪城市的天气情况保存在首页</li>
          </ul>
          <h3>移除城市:</h3>
          <p>如果你不想在首页关注某个城市，可以通过底部的按钮删除它</p>
          <button class="close" @click="isShow = false">关闭</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { storeToRefs } from 'pinia';
import { useCodeStore } from '@/stores/code.js';
import { useRouter } from 'vue-router';
const router = useRouter();
const store = useCodeStore();
const { weatherbase, cityName } = storeToRefs(store);

const isShow = ref(false);

const handlehome = () => {
  router.push('/');
  cityName.value = '';
};
</script>

<style scoped>
.header {
  width: 100%;
  height: 80px;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  color: rgb(255, 255, 255);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 280px;
}
.left {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  gap: 15px;
  cursor: pointer;
}
.middle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.text-lg {
  font-size: 18px;
  font-weight: 400;
}
.text-sm {
  font-size: 14px;
}
.right {
  font-size: 20px;
  cursor: pointer;
  display: flex;
  gap: 15px;
}
.right i:hover {
  color: rgb(0, 78, 113);
  transition: all 1s ease-in-out;
}
.logo {
  display: flex;
  gap: 20px;
}

.info {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  color: black;
}
.infotext {
  background: #fff;
  padding: 20px;
  width: 329.938px;
}
.infotext h3 {
  font-size: 16px;
  font-weight: 400;
}
.infotext p {
  font-size: 14px;
  margin-bottom: 20px;
}
.infotext ul {
  list-style: none;
  margin-bottom: 20px;
}
.infotext li {
  font-size: 14px;
}
.close {
  margin-top: 10px;
  cursor: pointer;
  background-color: rgb(0, 102, 138);
  color: #fff;
  border: none;
  font-size: 14px;
  padding: 8px 25px;
}
</style>
